<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
  <!-- 方式一：media指定媒体查询 -->
  <link rel="stylesheet" media="screen and (max-width: 768px)" href="./css/small.css">

  <!-- 方式二：在样式文件中指定媒体查询 -->
  <link rel="stylesheet" href="./css/middle.css">
  <link rel="stylesheet" href="./css/large.css">
  <link rel="stylesheet" href="./css/huge.css">
  <!-- <style>
    h1 {
      color: aquamarine;
      background: #ccc;
    }

    /* 超小屏幕 */
    @media screen and (max-width: 768px) {
      h1 {
        background-color: blue;
      }
    }

    /* 中等屏幕 */
    @media screen and (min-width: 768px) and (max-width: 992px) {
      h1 {
        background-color: blueviolet;
      }
    }

    /* 大屏幕 */
    @media screen and (min-width: 992px) and (max-width: 1200px) {
      h1 {
        background-color: chartreuse;
      }
    }

    /* 超宽屏幕 */
    @media screen and (min-width: 1200px) {
      h1 {
        background-color: crimson;
      }
    }
  </style> -->
</head>

<body>
  <h1>常用阈值</h1>
</body>

</html>